<template>
    <div class="reply-comment-container">
        <!-- 头部导航栏 -->
        <van-nav-bar
            :title="`${comment.reply_count}条回复`"
            left-text="返回"
        >
            <van-icon
                slot="left"
                name="cross"
                @click="$emit('close')"
            />
        </van-nav-bar>
        <!-- 置顶评论 -->
        <CommentItem
            :commentItem="comment"
            index="-1"
            :showLike="false"
        />
        <!-- 评论的回复 -->
        <CommentList
            :source="comment.com_id"
            type="c"
            :newItem="newItem"
            ref="comment-list"
        />
        <!-- 底部按钮 -->
        <div class="article-bottom">
            <van-button
                class="comment-btn"
                type="default"
                round
                size="small"
                @click="showWriteComment = true"
            >写评论
            </van-button>
        </div>
        <!-- 发布评论的回复 -->
        <PostComment
            :target="comment.com_id"
            :showWriteComment.sync="showWriteComment"
            :articleId="$route.params.id"
            @post-success="postSuccess"
        />
    </div>
</template>

<script>
import CommentList from 'com/articleId/comment_list';
import CommentItem from './comment_item';
import PostComment from 'com/articleId/post_comment';

export default {
    name: 'reply_comment',
    components: {
        CommentItem,
        CommentList,
        PostComment
    },
    props: {
        comment: {
            type: Object,
            required: true
        }
    },
    // 监控data中的数据变化
    watch: {},
    // 定义属性
    data () {
        return {
            showWriteComment: false,
            newItem: {}
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 方法集合
    methods: {
        // headerCommentLike (index) {
        //     this.$refs['comment-list'].onLike(index);
        // },
        postSuccess (newObj) {
            this.newItem = newObj;
            this.$emit('post-success', this.comment.index);
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    }
};
</script>

<style lang='less' scoped>
.article-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #fff;
    border-top: 1px solid #b3b3b3;
    .comment-btn {
        width: 200px;
        margin: 0 30px;
        background: #eee;
    }
}
</style>
